import React, { Component } from 'react'
import './itemfooter.scss'
import service from './img/service.png'
import addto from './img/addto.png'
import cartdet from './img/cart-detail.png'
// import { withRouter } from 'react-router-dom'
//将 ui组件转容器组件
import { connect } from 'react-redux';
//引入action
import { addCartAction } from '../../../store/action/cart';
// import { useNavigate } from 'react-router-dom';

class ItemFooter extends Component {
    addCartFn = () => {
        console.log(this.props);
        //1.整理需要的数据 ,id  name  pic price num
        const { ptKey, name, listImages, retailPrice } = this.props.itemObj.templateInfo;
        const data = {
            id: ptKey,
            name: name,
            pic: listImages,
            price: retailPrice,
            num: 1,
            checked: true
        }
        //调用 action中的动作，添加购物车到 redux中
        this.props.addCartAction(data);
    }
    render() {
        return (
            <div className='item_footer'>
                <div className='item_searver'>
                    <img src={service} alt={service} className='img_ser' />
                    <p>客服</p>
                </div>
                <div className='item_cart'>
                    <img src={addto} alt={addto} className='img_ser' onClick={this.addCartFn} />
                    <p>购物车</p>
                </div>
                <div className='item_btn'>
                    <img src={cartdet} alt={cartdet} className='img_add' />
                    <div className='addcart' onClick={this.addCartFn}>
                        加入购物车
                    </div>
                </div>
            </div>
        )
    }
}
export default connect(
    state => ({ cart: state.cart }),
    { addCartAction }
)(ItemFooter)